<template>
	<div class="site-page">
		<!-- 表格数据 -->
		<div class="w-full h-[90%]">
			<RichTable
				:data="tableData"
				:fields="fields"
				@on-search="handleSearch"
				@on-delete="handleBatchDelete"
				@on-add="addDialogVisible = true"
				@on-selection-change="handleSelectionChange">
				<el-table-column label="操作" fixed="right">
					<template #default="scope">
						<el-button link type="success" size="small" @click="handleSetEdit(scope.row)">
							修改
						</el-button>
						<el-button link type="danger" size="small" @click="handleDelete(scope.row._id)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</RichTable>
		</div>

		<!-- 添加站点配置 -->
		<els-dialog v-model="addDialogVisible" title="添加站点配置">
			<el-form :model="addForm" label-width="80px">
				<el-form-item label="标题">
					<el-input v-model="addForm.title" placeholder="请输入站点标题" />
				</el-form-item>
				<el-form-item label="描述">
					<el-input v-model="addForm.description" placeholder="请输入站点描述" />
				</el-form-item>
				<el-form-item label="关键词">
					<el-input v-model="addForm.keywords" placeholder="请输入关键词" />
				</el-form-item>
				<el-form-item label="全局CSS">
					<el-input v-model="addForm.globalCss" placeholder="请输入全局CSS" type="textarea" />
				</el-form-item>
				<el-form-item label="全局JS">
					<el-input v-model="addForm.globalJs" placeholder="请输入全局JS" type="textarea" />
				</el-form-item>
				<el-form-item label="关于">
					<el-input v-model="addForm.about" placeholder="请输入关于内容" type="textarea" />
				</el-form-item>
				<el-form-item label="启用">
					<el-switch v-model="addForm.isUse" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="addDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="handleAdd">创建</el-button>
			</template>
		</els-dialog>

		<!-- 修改站点配置 -->
		<els-dialog v-model="editDialogVisible" title="修改站点配置">
			<el-form :model="editForm" label-width="80px">
				<el-form-item label="标题">
					<el-input v-model="editForm.title" placeholder="请输入站点标题" />
				</el-form-item>
				<el-form-item label="描述">
					<el-input v-model="editForm.description" placeholder="请输入站点描述" />
				</el-form-item>
				<el-form-item label="关键词">
					<el-input v-model="editForm.keywords" placeholder="请输入关键词" />
				</el-form-item>
				<el-form-item label="全局CSS">
					<el-input v-model="editForm.globalCss" placeholder="请输入全局CSS" type="textarea" />
				</el-form-item>
				<el-form-item label="全局JS">
					<el-input v-model="editForm.globalJs" placeholder="请输入全局JS" type="textarea" />
				</el-form-item>
				<el-form-item label="关于">
					<el-input v-model="editForm.about" placeholder="请输入关于内容" type="textarea" />
				</el-form-item>
				<el-form-item label="启用">
					<el-switch v-model="editForm.isUse" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="editDialogVisible = false">取消</el-button>
				<el-button type="primary" @click="handleEdit">保存</el-button>
			</template>
		</els-dialog>

		<div class="flex items-center justify-between py-2">
			<div class="mr-2 flex items-center">
				<el-text type="info" size="small">选中：{{ selectList.length }}项</el-text>
			</div>
		</div>
	</div>
</template>

<script name="SitePage" lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import RichTable from '~/components/RichTable/index.vue';
import ElsDialog from '~/components/ElsDialog/index.vue';
import type { TableFields } from '~/components/RichTable/types';

interface ISite {
	_id?: string;
	title: string;
	description: string;
	keywords: string;
	globalCss: string;
	globalJs: string;
	about: string;
	isUse: boolean;
	createdAt?: string;
	updatedAt?: string;
}

const tableData = ref<ISite[]>([]);
const selectList = ref<ISite[]>([]);
const addDialogVisible = ref(false);
const editDialogVisible = ref(false);
const addForm = reactive<ISite>({
	title: '',
	description: '',
	keywords: '',
	globalCss: '',
	globalJs: '',
	about: '',
	isUse: false,
});
const editForm = reactive<ISite>({
	_id: '',
	title: '',
	description: '',
	keywords: '',
	globalCss: '',
	globalJs: '',
	about: '',
	isUse: false,
});

const fields: TableFields = [
	{ type: 'text', label: 'ID', prop: '_id', sortable: true },
	{ type: 'text', label: '标题', prop: 'title' },
	{ type: 'text', label: '描述', prop: 'description' },
	{ type: 'text', label: '关键词', prop: 'keywords' },
	{ type: 'text', label: '启用', prop: 'isUse' },
	{ type: 'text', label: '创建时间', prop: 'createdAt' },
	{ type: 'text', label: '更新时间', prop: 'updatedAt' },
];

const getTableData = (keyword?: string) => {
	$fetch('/api/admin/site/list', {
		query: { keyword },
	}).then((res: any) => {
		if (res.code === 1) {
			tableData.value = res.data.list;
		} else {
			ElMessage.error(res.message);
		}
	});
};

const handleSearch = (k: string) => {
	getTableData(k);
};

const handleSelectionChange = (items: ISite[]) => {
	selectList.value = items;
};

const handleAdd = () => {
	$fetch('/api/admin/site/create', {
		method: 'POST',
		body: addForm,
	}).then((res: any) => {
		if (res.code === 1) {
			ElMessage.success('添加成功');
			addDialogVisible.value = false;
			Object.assign(addForm, {
				title: '',
				description: '',
				keywords: '',
				globalCss: '',
				globalJs: '',
				about: '',
				isUse: false,
			});
			getTableData();
		} else {
			ElMessage.error(res.message);
		}
	});
};

const handleSetEdit = (row: ISite) => {
	Object.assign(editForm, row);
	editDialogVisible.value = true;
};

const handleEdit = () => {
	$fetch('/api/admin/site/update', {
		method: 'PATCH',
		body: editForm,
	}).then((res: any) => {
		if (res.code === 1) {
			ElMessage.success('修改成功');
			editDialogVisible.value = false;
			getTableData();
		} else {
			ElMessage.error(res.message);
		}
	});
};

const handleDelete = (id: string) => {
	ElMessageBox.confirm('删除后无法恢复，是否确认删除？', '警告', {
		type: 'warning',
	})
		.then(() => {
			$fetch('/api/admin/site/delete', {
				method: 'DELETE',
				query: { id },
			}).then((res: any) => {
				if (res.code === 1) {
					ElMessage.success('删除成功');
					getTableData();
				} else {
					ElMessage.error(res.message);
				}
			});
		})
		.catch(() => {
			ElMessage.info('取消删除');
		});
};

const handleBatchDelete = () => {
	if (selectList.value.length === 0) {
		ElMessage.warning('请先选择要删除的站点配置');
		return;
	}
	ElMessageBox.confirm('删除后无法恢复，是否确认删除？', '警告', {
		type: 'warning',
	})
		.then(() => {
			$fetch('/api/admin/site/delete', {
				method: 'DELETE',
				query: { id: selectList.value.map((item) => item._id).join(',') },
			}).then((res: any) => {
				if (res.code === 1) {
					ElMessage.success(res.message);
					getTableData();
				} else {
					ElMessage.error(res.message);
				}
			});
		})
		.catch(() => {
			ElMessage.info('取消删除');
		});
};

getTableData();
</script>
